<template>
<!-- 申请列表 -->
  <div class="apply-container">
    <div class="backbar">
      <div class="back" @click="$router.push({name: 'GroupSetting'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
      <div class="multi" @click="onMulti">
        <span v-if="!isMulti">多选</span>
        <span v-else>取消</span>
      </div>
    </div>
    <div class="no-data" v-if="applyList.length === 0">
      没有数据
    </div>
    <!-- <ul class="apply-list">
      <li class="list-item" v-for="(item, i) of applyList" :key="i">
        <div class="icon">
          <img :src="item.headUrl" alt="">
        </div>
        <div class="info">
          <div>{{ item.nickname }}</div>
        </div>
        <div class="action">
          <div class="agree button" @click="onAgree(item)">
            同意
          </div>
          <div class="reject button" @click="onReject(item)">
            拒绝
          </div>
        </div>
      </li>
    </ul> -->

    <div class="apply-list-wrapper">
      <ul class="apply-list">
        <li
          class="list-item flexbox justify-around align-center"
          v-for="(item, i) of applyList"
          :key="i"
          @click="onItemClicked(item, i)"
        >
          <div class="select" v-if="isMulti">
            <div class="radio flex-center" :class="{'selected': item.selected}">
              <img v-if="item.selected" src="@/assets/icons/check.svg" alt/>
            </div>
          </div>
          <div class="head">
            <img :src="item.headUrl" alt />
          </div>
          <div class="name ellipsis">{{ item.nickname }}</div>
          <div class="info">
            <!-- <span class="emp-name">{{item.inviteName}}</span>
           <span style="color: #909090;">邀请进群</span> -->
          </div>
        </li>
      </ul>
    </div>

    <div class="footer flexbox justify-between" v-if="isMulti">
      <div class="item all" @click="onAllClicked">
        <span v-if="isAll">取消全选</span>
        <span v-else>全选</span>
      </div>
      <div class="item flex-center">
        <div class="agree" @click="onAgree">同意</div>
        <div class="reject" @click="onReject">不同意</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { Webim } from '@/utils/types';
import { Response, PageVo } from '@/api/bean';
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
import { map } from 'lodash';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');


@Component<ApplyList>({
  mixins: [MessageMixin],
})
export default class ApplyList extends Vue {
  @userModule.Action("saveGroupMembersFN") saveGroupMembersFN: any;

  private applyList: Array<any> = [];

  private isAll: boolean = false;
  private isMulti: boolean = false;

  private eventList: Array<string> = [
    "$handleAddApply",
    "$getMemberList",
    "$getApplyList",
  ];

  protected mounted() {
    this.initEvents(this.eventList);
    this.sendMessage(MsgTypeKV.getApplyList);
  }

  private onItemClicked(item: any, i: number) {
    if (this.isMulti) {
      this.$set(this.applyList[i], 'selected', !item.selected);
    }
  }

  /**
   * 全选或非全选
   */
  private onAllClicked() {
    this.isAll = !this.isAll;
    this.applyList.forEach((item: any) => {
      item.selected = this.isAll;
    });
  }
  /**
   * 开启多选
   */
  private onMulti() {
    this.isMulti = !this.isMulti;
  }

  /**
   * 同意入群
   */
  private  onAgree() {
    let list = map(this.applyList.filter((item)=>{
      return item.selected;
    }), (item) => {
      return item.apply.recordId;
    });

    list.forEach((item) => {
      this.sendMessage(MsgTypeKV.handleAddApply, {
        recordId: item,
        applyStatus: 1,
      });
    });

  }

  /**
   * 拒绝入群
   */
  private onReject() {
    let list = map(this.applyList.filter((item)=>{
      return item.selected;
    }), (item) => {
      return item.apply.recordId;
    });

    list.forEach((item) => {
      this.sendMessage(MsgTypeKV.handleAddApply, {
        recordId: item,
        applyStatus: 2,
      });
    });
  }

  /**
   * 获取加群列表
   */
  private $getApplyList(data: any) {
    if (data.result === 0) {
      this.applyList = data.infoList;
    } else {
      this.applyList = [];
      // this.$createToast({
      //   txt: data.message,
      //   type: "warn",
      //   time: 3000
      // }).show();
    }
  }
  /**
   * 获取加群列表
   */
  private $getMemberList(data: any) {
    if (data.result === 0) {
      this.saveGroupMembersFN(data.infoList);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 处理加群的申请（退群的申请不需要处理）
   */
  private $handleAddApply(data: Response<any>) {
    if (data.result === 0) {
      this.sendMessage(MsgTypeKV.getApplyList);
      this.sendMessage(MsgTypeKV.getMemberList, {
      groupId: sessionStorage.getItem("groupId")
    });
    } else {
      // this.$createToast({
      //   txt: data.message,
      //   type: "warn",
      //   time: 3000
      // }).show();
    }
  }



}
</script>

<style lang="stylus" scoped>
.list-item
  width 100%
  height 56px
  display flex
  justify-content space-between
  border-bottom 1px solid #dcdcdc
  background white
  .icon
    flex-basis 18%
    img 
      width 90% 
      height 90%
  .info
    flex-basis 50%
    height 100%
    display flex
    justify-content space-between
    align-items center
    padding-left 32px
  .action
    flex-basis 32%
    display flex
    justify-content space-around
    align-items center
    .button
      width 48px
      height 18px
      line-height 18px
      border-radius 10px
      border 1px solid rgb(87, 189, 109)
      color rgb(87, 189, 109)
      font-size 12px
      line-height 18px
      &.reject
        color #f44336
        border-color #f44336

.apply-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto
  position relative
  background #f1f1f1

.no-data
  margin-top 40px
  font-size 18px

.apply-list-wrapper
  width 100%
  .apply-list
    box-sizing border-box
    width 100%
    .list-item 
      height 48px
      border-bottom 0.2px solid #f1f1f1
      padding-left 12px 
      box-sizing border-box
      .select
        flex-basis 10%
        width 10%
        .radio
          width 18px
          height 18px
          border-radius 50% 
          border 0.8px solid #a2a2a2
          img 
            width 18px 
            height 18px 
          &.selected
            background rgb(87, 189, 109)
            border-color rgb(87, 189, 109)
      .head
        flex-basis 13%
        width 13%
        padding-left 20px
        img 
          width 36px 
          height 36px 
          border-radius 4px
      .name
        flex-basis 77%
        width 77%
        text-align left 
        padding-left 30px 
        box-sizing border-box
      // .info
      //   flex-basis 10%
      //   width 10%

.footer 
  width 100%
  height 48px 
  background white 
  position absolute 
  bottom 0
  left 0
  .item 
    width 120px
    height 48px
    line-height 48px
    text-align left
    padding-left 12px
    &.all
      color #4d4d4d
    .agree 
      width 96px
      height 48px
      line-height 48px
      color #40c546
    .reject 
      width 96px
      height 48px
      line-height 48px
      color #f44336

.backbar
  display: flex
  justify-content: space-between
  padding: 12px
  border-bottom 0.5px solid #f1f1f1
  .fa-lgl 
    bottom 2px
</style>

